<template>
    <div class="app-container">
        <el-card shadow="never">
            <!-- 条件查询 -->
            <el-form v-show="showSearch" ref="queryForm" :model="queryParams" label-width="120px" @keyup.enter.native="submitSearch" @submit.native.prevent>
                <el-row>
                    <el-col :md="6" :sm="12">
                        <el-form-item label="国家" prop="country.value">
                            <el-select
                                v-model="queryParams.country.value"
                                style="margin-left: 20px;"
                                clearable
                                multiple
                                placeholder="请选择国家">
                                    <el-option
                                        v-for="item in country_arr"
                                        :key="item.country"
                                        :label="item.country"
                                        :value="item.country">
                                        <span style="float: left">{{ item.country }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.count }}</span>
                                    </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="6" :sm="12">
                        <el-form-item label="单量" prop="count.value">
                            <el-input v-model="queryParams.count.value" placeholder="请输入订单量" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :md="6" :sm="12">
                        <el-form-item label="电话" prop="phone.value">
                            <el-input v-model="queryParams.phone.value" placeholder="请输入电话" clearable />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :md="6" :sm="12">
                        <el-form-item label="最近下单" prop="created_at.value">
                            <el-date-picker
                                v-model="queryParams.created_at.value"
                                type="date"
                                clearable
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col> -->
                    <el-col :md="6" :sm="12">
                        <el-form-item label="店铺" prop="site_id.value">
                            <el-select
                                v-model="queryParams.site_id.value"
                                style="margin-left: 20px;"
                                clearable
                                placeholder="请选择店铺">
                                    <el-option
                                        v-for="item in site_arr"
                                        :key="item.site_number"
                                        :label="item.site_number"
                                        :value="item.site_number">
                                        <span style="float: left">{{ item.site_number }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.site_url }}</span>
                                    </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :md="6" :sm="12">
                        <el-form-item label="店铺:" prop="site_id.value">
                            <SelectPage v-model="queryParams.site_id.value" :url="'/admin/site/selectPage'" show_field="site_name" query_field="site_name" :multiple="false" clearable/>
                        </el-form-item>
                    </el-col> -->
                    <!-- <el-col :md="6" :sm="12">
                        <el-form-item label="客户姓名" prop="title.value">
                            <el-input v-model="queryParams.title.value" placeholder="请输入客户姓名" clearable />
                        </el-form-item>
                    </el-col> -->
                    <el-col :md="6" :sm="12">
                        <el-form-item label="邮箱" prop="email.value">
                            <el-input v-model="queryParams.email.value" placeholder="请输入邮箱" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :md="6" :sm="12">
                        <el-form-item label="SKU" prop="sku.value">
                            <el-input v-model="queryParams.sku.value" placeholder="请输入SKU" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :md="6" :sm="12">
                        <el-form-item label="订阅" prop="is_published.value">
                            <el-select
                                v-model="queryParams.is_published.value"
                                style="margin-left: 20px;"
                                clearable
                                placeholder="请选择店铺">
                                    <el-option
                                        v-for="item in is_published_arr"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        <span style="float: left">{{ item.label }}</span>
                                        <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.site_url }}</span> -->
                                    </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="6" :sm="12">
                        <el-form-item class="ele-text-right" label-width="50px">
                            <el-button type="primary" size="mini" @click="submitSearch" icon="el-icon-search" class="ele-btn-icon">搜索 </el-button>
                            <el-button @click="resetQuery" size="mini" icon="el-icon-refresh">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template>
                <el-table
                :loading="loading"
                :data="country_classification"
                style="width: 100%">
                    <el-table-column
                        prop="country"
                        label="国家"
                        width="">
                    </el-table-column>
                    <el-table-column
                        prop="count"
                        label="总数量"
                        width="">
                    </el-table-column>
                    <el-table-column
                        prop="paid"
                        label="已购买">
                    </el-table-column>
                    <el-table-column
                        prop="paid_not"
                        label="未购买">
                    </el-table-column>
                    <el-table-column
                        prop="count_today"
                        label="今日新增">
                    </el-table-column>
                    <el-table-column
                        prop="count_todaypaid"
                        label="今日购买">
                    </el-table-column>
                    <el-table-column
                        prop="count_phone"
                        label="手机用户">
                    </el-table-column>
                    <el-table-column
                        prop="count_email"
                        label="邮箱用户">
                    </el-table-column>
                </el-table>
            </template>

            <el-row :gutter="10" class="mb8" style="margin-top: 10px;">
                <!-- <el-col :span="1.5">
                    <SelectPage v-model="shop" :url="'/admin/site/selectPage'" show_field="site_name" placeholder="请选择新店铺" query_field="site_name" :multiple="true" />
                </el-col>
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="el-icon-plus"  size="small" @click="export_customer">直接导出</el-button>
                </el-col> -->
                <right-toolbar :showSearch.sync="showSearch" @queryTable="initIndex" :columns="columns" printId="#quickadmin"></right-toolbar>
            </el-row>

            
            <el-table 
                :data="tableData" 
                border
                style="width: 100%">
                    <el-table-column label="店铺" width="" align="center">
                        <template slot-scope="scope">
                            <span style="font-family: Oswald,sans-serif;
    font-weight: bold;color: #050505;
    display: block;">{{ scope.row.site_name }}</span>
                        </template>    
                    </el-table-column>
                    <el-table-column
                        prop="country"
                        label="国家">
                    </el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="title"
                        label="客户姓名">
                    </el-table-column>
                    <el-table-column
                        prop="phone"
                        label="联系方式">
                    </el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="email"
                        label="邮箱">
                    </el-table-column>
                    <el-table-column
                        prop="ycreated_at"
                        label="最近更新时间">
                    </el-table-column>
                    <el-table-column
                        prop="count"
                        width="100"
                        label="订单量">
                    </el-table-column>
                    <el-table-column label="订阅" align="center" prop="is_published">
                        <template slot-scope="scope">
                            <span :class="scope.row.is_published === '已订阅' ? 'text-navy' : 'text-danger'">{{ scope.row.is_published === '已订阅' ? '已订阅' : '未订阅' }}</span>
                        </template>
                    </el-table-column>
            </el-table>
            <!-- 分页 -->
            <pagination :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="initIndex" />
        </el-card>

        <!-- 编辑弹窗 -->
        <el-dialog :title="!disabled ? '编辑' : '详情'" :visible="editOpen"  :before-close="beforeClose" destroy-on-close>
            <EditForm ref="editForm" :findFormData="findFormData"  :disabled="disabled" @submitForm="submitForm" :editFormParams="editFormParams" @editFormCancel="beforeClose" />
        </el-dialog>

    </div>
</template>

<script>
import { curdMixin } from '@/mixins/curdMixin'
import EditForm from './EditFormCom'
export default { 
    name: 'Curd',
    mixins: [curdMixin],
    components: { EditForm },
    
    data() {
        return {
            country_arr: [],
            site_arr: [],
            is_published_arr: [
                { label: '所有', value: '' },
                { label: '已订阅', value: '1' },
                { label: '未订阅', value: '2' },
            ],
            country_classification: [],
            // table结构
            shop: 0,
            // 接口地址
            api: {
                index: `/admin/ordershopify/index`,
                find: `/admin/ordershopify/find`,
                add: `/admin/ordershopify/add`,
                edit: `/admin/ordershopify/edit`,
                delete: `/admin/ordershopify/delete`,
                export: `/admin/ordershopify/export`,
                status: `/admin/ordershopify/status`,
                export_customer: `/admin/ordershopify/export_customer`,
            },
            editFormParams: {
            },
            pageInfo: {
                sort: 'id',
            },
            primaryKey: 'id',
            // 搜索表单是否展开
            searchExpand: false,
            exportLoading: false,
              //是否展示搜索
            showSearch: true,
            // 查询参数
            queryParams: {
                email: { value:undefined, op: '%like%'},
                title: { value:undefined, op: '%like%'},
                country: { value:undefined, op: '%like%'},
                site_id: { value:undefined, op: '%like%'},
                phone: { value:undefined, op: '%like%'},
                is_published: { value:undefined, op: '='},
                count: { value:undefined, op: '='},
                created_at: { value:undefined, op: '='},
                sku: { value:undefined, op: '='},
            },
            status: [
                { label: '所有', value: '' },
                { label: '已关联订单', value: 'normal' },
                { label: '未关联订单', value: 'hidden' },
            ],
        }
    },
    created () {
        this.initIndex()
        this.classification()
    },
    watch: {
        
    },
    methods: {
        // 案列：当前组件格式化方法
        testFormatter(prop) {
            return prop
        }, 
        // sku生成回显
        async classification() {
            let response = await this.request.post('/admin/ordershopify/classification', { 
                
            })
            this.country_classification = response.data.classification;
            this.country_arr = response.data.country;
            this.site_arr = response.data.site;
        },
        export_customer(row) {
            let tableIds = row[this.primaryKey] || this.ids
            tableIds = tableIds.toString()
            
            if(tableIds == ''){
                this.$message.error('请勾选需要导出的客户');
                return false;
            }
            if(tableIds.length >= 14 ){
                this.$message.error('每次导出最多两个客户');
                return false;
            }
            if(this.shop == ''){
                this.$message.error('请选择导出的店铺');
                return false;
            }
            this.$confirm(`是否确认导出到新店铺?`, '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
            .then(() => {
                this.handletf_apply(tableIds);
            })
            .catch(() => {})
            .finally(() => {
                this.exportLoading = false
            })
        },

        async handletf_apply(tableIds) {
            let response = await this.request.post(this.api.export_customer, { 
                customer_id: tableIds,
                site_id:this.shop,
            })
            this.$message.success(response.msg)
        },
    },
}
</script>
<style lang="scss">
.btn-mar {
    margin: 5px !important;
}
</style>
